<template>
  <div class="system-container">
    <vab-query-form>
      <el-form :inline="true" :model="queryForm" @submit.native.prevent>
        <el-form-item class="pr8">
          <el-select
            v-model="queryForm.BLOOD_TYPE"
            clearable
            filterable
            placeholder="血液成分"
            style="width: 150px"
          >
            <el-option
              v-for="(item, index) in bloodTypes"
              :key="index"
              :label="item.BLOOD_TYPE_NAME"
              :value="item.BLOOD_TYPE"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="pr8">
          <el-select
            v-model="queryForm.blood_group"
            clearable
            filterable
            placeholder="初检血型"
            style="width: 150px"
          >
            <el-option
              v-for="(item, index) in bloodGroupsFilter"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="pr8">
          <el-input
            v-model.trim="queryForm.blood_id"
            clearable
            placeholder="储血号"
            style="width: 100px"
          />
        </el-form-item>
        <el-form-item class="pr8">
          <el-select
            v-model="queryForm.blood_source"
            clearable
            filterable
            placeholder="血源"
            style="width: 100px"
          >
            <el-option
              v-for="(item, index) in bloodSources"
              :key="index"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="pr8">
          <el-date-picker
            v-model="queryForm.blood_in_date"
            end-placeholder="结束日期"
            range-separator=" ~ "
            start-placeholder="入库开始日期"
            style="width: 240px"
            type="daterange"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item class="pr8">
          <el-date-picker
            v-model="queryForm.allowdate"
            end-placeholder="结束日期"
            range-separator=" ~ "
            start-placeholder="放行开始日期"
            style="width: 240px"
            type="daterange"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item class="pr8">
          <el-date-picker
            v-model="queryForm.created_at"
            end-placeholder="结束日期"
            range-separator=" ~ "
            start-placeholder="拉取开始日期"
            style="width: 240px"
            type="daterange"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-checkbox
            v-model="queryForm.unrecheck"
            border
            :false-label="0"
            :true-label="1"
          >
            未复检
          </el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="queryData">
            查询
          </el-button>
          <el-button icon="el-icon-plus" type="success" @click="handleEdit">
            新增记录
          </el-button>
          <!-- <el-button icon="el-icon-refresh" type="warning" @click="handleSync">
            同步机器数据
          </el-button> -->
          <el-button icon="el-icon-top" type="success" @click="handleFetch">
            拉取接口数据
          </el-button>
          <el-button
            icon="el-icon-document"
            :loading="loading"
            type="warning"
            @click="getCensus"
          >
            统计
          </el-button>
          <el-button type="default" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </vab-query-form>
    <el-table
      v-loading="listLoading"
      border
      :data="list"
      :row-class-name="tableRowClassName"
      @row-dblclick="handleDetail"
      @sort-change="sortChange"
    >
      <el-table-column align="left" label="储血号" prop="blood_id" width="110">
        <template #default="{ row }">
          <el-tag
            v-if="row.updated_user"
            size="mini"
            style="margin-right: 4px"
            type="danger"
          >
            改
          </el-tag>
          <span>{{ row.blood_id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="血源"
        prop="blood_source"
        sortable="custom"
        width="70"
      />
      <el-table-column
        align="center"
        label="血液成分"
        prop="BLOOD_TYPE_NAME"
        show-overflow-tooltip
        sortable="custom"
        width="100"
      />
      <el-table-column
        align="center"
        label="ABO(初检)"
        prop="blood_group"
        sortable="custom"
        width="60"
      />
      <el-table-column
        align="center"
        label="Rh(D)(初检)"
        prop="blood_rhd"
        sortable="custom"
        width="60"
      />
      <el-table-column
        align="center"
        label="ABO"
        prop="blood_group_recheck"
        width="60"
      >
        <template #default="{ row }">
          {{ getAttr(row, 'blood_group_recheck') }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="Rh(D)"
        prop="blood_rhd_recheck"
        width="60"
      >
        <template #default="{ row }">
          {{ getAttr(row, 'blood_rhd_recheck') }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="抗筛" prop="ABScr" width="50">
        <template #default="{ row }">
          {{ getAttr(row, 'ABScr') }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="抗A" prop="AntiA" width="50">
        <template #default="{ row }">
          {{ getAttr(row, 'AntiA') }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="抗B" prop="AntiB" width="50">
        <template #default="{ row }">
          {{ getAttr(row, 'AntiB') }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="抗D" prop="AntiD" width="50">
        <template #default="{ row }">
          {{ getAttr(row, 'AntiD') }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="Ac" prop="Ac" width="50">
        <template #default="{ row }">
          {{ getAttr(row, 'Ac') }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="Bc" prop="Bc" width="50">
        <template #default="{ row }">
          {{ getAttr(row, 'Bc') }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="Ctrl" prop="Ctrl" width="50">
        <template #default="{ row }">
          {{ getAttr(row, 'Ctrl') }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="复检时间"
        prop="blood_in_date"
        show-overflow-tooltip
        sortable
        width="135"
      >
        <template #default="{ row }">
          {{ getAttr(row, 'created_at') }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="入库时间"
        prop="blood_in_date"
        show-overflow-tooltip
        sortable
        width="135"
      />
      <el-table-column
        align="center"
        label="放行时间"
        prop="allowdate"
        show-overflow-tooltip
        sortable
        width="135"
      />
      <el-table-column
        align="center"
        label="修改时间"
        prop="updated_at"
        show-overflow-tooltip
        sortable
        width="135"
      />
      <el-table-column
        align="center"
        label="修改者"
        prop="updated_user"
        show-overflow-tooltip
        width="80"
      />
      <el-table-column
        align="center"
        label="数据拉取时间"
        prop="created_at"
        show-overflow-tooltip
        width="135"
      />
      <el-table-column align="center" fixed="right" label="操作" width="130">
        <template #default="scope">
          <el-link
            class="mr12"
            icon="el-icon-edit"
            size="mini"
            type="primary"
            @click="handleEdit(scope.row)"
          >
            修改
          </el-link>
          <el-link
            icon="el-icon-document"
            size="mini"
            type="success"
            @click="handleDetail(scope.row)"
          >
            详情
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="h12"></div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        align="center"
        class-name="font-bold"
        label="全部"
        prop="date"
      >
        <el-table-column align="center" label="总数" prop="date">
          <template #default="scope">
            <b class="font18">{{ scope.row.ALL_T }}</b>
          </template>
        </el-table-column>
        <el-table-column align="center" label="未复检" prop="date">
          <template #default="scope">
            <b class="font18">{{ scope.row.ALL_U }}</b>
          </template>
        </el-table-column>
        <el-table-column align="center" label="一致" prop="date">
          <template #default="scope">
            <b class="font18">{{ scope.row.ALL_R }}</b>
          </template>
        </el-table-column>
        <el-table-column align="center" label="不一致" prop="date">
          <template #default="scope">
            <b class="font18">{{ scope.row.ALL_W }}</b>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        align="center"
        class-name="bg-primary-plain"
        label="A"
        prop="date"
      >
        <el-table-column
          align="center"
          class-name="bg-primary-plain"
          label="总数"
          prop="date"
        >
          <template #default="scope">
            <b class="font18">{{ scope.row.A_T || 0 }}</b>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          class-name="bg-primary-plain"
          label="未复检"
          prop="date"
        >
          <template #default="scope">
            <b class="font18">{{ scope.row.A_U || 0 }}</b>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          class-name="bg-primary-plain"
          label="一致"
          prop="date"
        >
          <template #default="scope">
            <b class="font18">{{ scope.row.A_R || 0 }}</b>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          class-name="bg-primary-plain"
          label="不一致"
          prop="date"
        >
          <template #default="scope">
            <b class="font18">{{ scope.row.A_W || 0 }}</b>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        align="center"
        class-name="bg-warning-plain"
        label="B"
        prop="name"
      >
        <el-table-column
          align="center"
          class-name="bg-warning-plain"
          label="总数"
          prop="date"
        >
          <template #default="scope">
            <b class="font18">{{ scope.row.B_T || 0 }}</b>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          class-name="bg-warning-plain"
          label="未复检"
          prop="date"
        >
          <template #default="scope">
            <b class="font18">{{ scope.row.B_U || 0 }}</b>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          class-name="bg-warning-plain"
          label="一致"
          prop="date"
        >
          <template #default="scope">
            <b class="font18">{{ scope.row.B_R || 0 }}</b>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          class-name="bg-warning-plain"
          label="不一致"
          prop="date"
        >
          <template #default="scope">
            <b class="font18">{{ scope.row.B_W || 0 }}</b>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        align="center"
        class-name="bg-success-plain"
        label="AB"
        prop="address"
      >
        <el-table-column
          align="center"
          class-name="bg-success-plain"
          label="总数"
          prop="date"
        >
          <template #default="scope">
            <b class="font18">{{ scope.row.AB_T || 0 }}</b>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          class-name="bg-success-plain"
          label="未复检"
          prop="date"
        >
          <template #default="scope">
            <b class="font18">{{ scope.row.AB_U || 0 }}</b>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          class-name="bg-success-plain"
          label="一致"
          prop="date"
        >
          <template #default="scope">
            <b class="font18">{{ scope.row.AB_R || 0 }}</b>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          class-name="bg-success-plain"
          label="不一致"
          prop="date"
        >
          <template #default="scope">
            <b class="font18">{{ scope.row.AB_W || 0 }}</b>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        align="center"
        class-name="bg-danger-plain"
        label="O"
        prop="address"
      >
        <el-table-column
          align="center"
          class-name="bg-danger-plain"
          label="总数"
          prop="date"
        >
          <template #default="scope">
            <b class="font18">{{ scope.row.O_T || 0 }}</b>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          class-name="bg-danger-plain"
          label="未复检"
          prop="date"
        >
          <template #default="scope">
            <b class="font18">{{ scope.row.O_U || 0 }}</b>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          class-name="bg-danger-plain"
          label="一致"
          prop="date"
        >
          <template #default="scope">
            <b class="font18">{{ scope.row.O_R || 0 }}</b>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          class-name="bg-danger-plain"
          label="不一致"
          prop="date"
        >
          <template #default="scope">
            <b class="font18">{{ scope.row.O_W || 0 }}</b>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.page"
      :layout="layout"
      :pagesize="queryForm.pagesize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <edit ref="edit" @census="census" @close="close" @fetch-data="fetchData" />
    <detail ref="detail" />
    <el-dialog title="拉取接口数据" :visible.sync="dialogVisible" width="600px">
      <vab-query-form>
        <el-form
          ref="searchForm"
          :inline="true"
          :model="searchForm"
          :rules="rules"
          @submit.native.prevent
        >
          <el-form-item class="pr8">
            <el-select
              v-model="searchForm.blood_source"
              clearable
              filterable
              placeholder="血源"
              style="width: 140px"
            >
              <el-option
                v-for="(item, index) in bloodSources"
                :key="index"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="searchForm.created_at"
              end-placeholder="结束时间"
              range-separator=" ~ "
              start-placeholder="录入开始时间"
              style="width: 320px"
              type="daterange"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              :loading="loading"
              type="primary"
              @click="fetchSearchData"
            >
              拉取
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form>
    </el-dialog>
    <el-dialog
      title="数据统计"
      :visible.sync="censusDialogVisible"
      width="800px"
    >
      <el-empty
        v-if="censusData.total === 0"
        description="当前搜索条件下无任何记录"
      />
      <div v-else>
        <el-divider content-position="left">
          <b class="color-primary">统计信息</b>
        </el-divider>
        <el-descriptions
          border
          :column="4"
          content-class-name="contentClass"
          label-class-name="labelClass"
        >
          <el-descriptions-item label="总样本数">
            {{ censusData.total }}
          </el-descriptions-item>
          <el-descriptions-item label="未复检">
            {{ censusData.unrecheck }}
          </el-descriptions-item>
          <el-descriptions-item label="一致">
            {{ censusData.right }}
          </el-descriptions-item>
          <el-descriptions-item label="不一致">
            {{ censusData.wrong }}
          </el-descriptions-item>
        </el-descriptions>
        <div class="h24"></div>
        <el-divider content-position="left">
          <b class="color-primary">血型</b>
        </el-divider>
        <el-table :data="bloodGroupData" style="width: 100%">
          <el-table-column align="center" label="血型" prop="name" />
          <el-table-column align="center" label="总样本数" prop="total" />
          <el-table-column align="center" label="未复检" prop="unrecheck" />
          <el-table-column align="center" label="一致" prop="right" />
          <el-table-column align="center" label="不一致" prop="wrong" />
        </el-table>
        <div class="h24"></div>
        <el-divider content-position="left">
          <b class="color-primary">血液成分</b>
        </el-divider>
        <el-table :data="bloodTypeData" style="width: 100%">
          <el-table-column align="center" label="血液成分" prop="name" />
          <el-table-column align="center" label="总样本数" prop="total" />
          <el-table-column align="center" label="未复检" prop="unrecheck" />
          <el-table-column align="center" label="一致" prop="right" />
          <el-table-column align="center" label="不一致" prop="wrong" />
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getAll as getList, getCensus } from '@/api/bloodRecheck'
  import { PLAK0009 } from '@/api/client'
  import { PLAK0025ForBloodRecheck } from '@/api/client'
  import { sync } from '@/api/inspectAbo'
  import Edit from './components/edit'
  import Detail from './components/detail'
  import { removeEmptyField, getCurrentDate, getNextDate } from '@/utils'
  import { bloodSources, bloodGroupsFilter } from '@/utils/constant'
  export default {
    name: 'LabTestRecheck',
    components: {
      Edit,
      Detail,
    },
    data() {
      return {
        tableData: [{}],
        bloodGroupData: [],
        bloodTypeData: [],
        censusData: {},
        loading: false,
        list: [],
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        listLoading: false,
        selectRows: '',
        bloodGroupsFilter,
        queryForm: {
          blood_id: '',
          blood_source: '自采',
          created_at: '',
          allowdate: [getNextDate(getCurrentDate(), -1), getCurrentDate()],
          blood_in_date: '',
          BLOOD_TYPE: 'XFHXB',
          page: 1,
          pagesize: 10,
          order: '',
          unrecheck: 0,
        },
        dialogVisible: false,
        bloodMatch: null,
        title: '',
        searchForm: {
          created_at: '',
          blood_source: '',
        },
        bloodSources,
        rules: {
          blood_source: [
            { required: true, message: '请选择血源', trigger: 'blur' },
          ],
          created_at: [
            { required: true, message: '请选择日期时间', trigger: 'blur' },
          ],
        },
        bloodTypes: [],
        censusBloodGroup: [],
        censusBloodType: [],
        censusTotal: 0,
        censusDialogVisible: false,
      }
    },
    created() {
      this.fetchData()
      this.PLAK0009()
      this.census()
    },
    methods: {
      close() {
        this.fetchData()
        this.census()
      },
      sortChange(e) {
        this.queryForm.order = e.prop + ' ' + e.order.replace('ending', '')
        this.queryData()
      },
      async PLAK0009() {
        const { data } = await PLAK0009()
        this.bloodTypes = data
      },
      reset() {
        this.queryForm = {
          blood_id: '',
          blood_source: '自采',
          created_at: '',
          allowdate: [getNextDate(getCurrentDate(), -1), getCurrentDate()],
          blood_in_date: '',
          BLOOD_TYPE: 'XFHXB',
          page: 1,
          pagesize: 10,
          order: '',
        }
        this.queryData()
      },
      getAttr(row, attr) {
        if (row.updated_user) {
          return row[attr] || ''
        } else {
          if (row.inspectAbosFormat.length > 0) {
            const active = row.inspectAbosFormat.filter((val) => {
              return +val.active === 1
            })
            if (active.length > 0) {
              return active[0][attr] || ''
            }
            return row.inspectAbosFormat[0][attr] || ''
          }
          return ''
        }
      },
      handleEdit(row) {
        if (row.blood_id) {
          this.$refs['edit'].showEdit(row)
        } else {
          this.$refs['edit'].showEdit()
        }
      },
      handleDetail(row) {
        this.$refs['detail'].show(row)
      },
      async handleSync() {
        const { msg } = await sync()
        this.$message.success(msg)
      },
      handleFetch() {
        this.dialogVisible = true
      },
      fetchSearchData() {
        this.$refs.searchForm.validate((valid) => {
          if (valid) {
            this.PLAK0025ForBloodRecheck()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      async PLAK0025ForBloodRecheck() {
        if (!this.searchForm.blood_source) {
          this.$message.error('请选择血源')
          return
        }
        if (!this.searchForm.created_at) {
          this.$message.error('请选择日期时间')
          return
        }
        const params = {
          START_DATE: this.searchForm.created_at[0],
          END_DATE: this.searchForm.created_at[1],
          BLOOD_SOURCE: this.searchForm.blood_source,
        }
        this.loading = true
        setTimeout(async () => {
          const { msg } = await PLAK0025ForBloodRecheck(params).catch(() => {
            this.loading = false
          })
          this.loading = false
          this.$baseMessage(msg, 'success', 'vab-hey-message-success')
          this.fetchData()
        }, 1000)
      },
      queryData() {
        this.queryForm.page = 1
        this.fetchData()
        this.census()
      },
      async fetchData() {
        this.listLoading = true
        const { data } = await getList(removeEmptyField(this.queryForm))
        this.list = data.data
        this.total = data.total
        this.listLoading = false
      },
      getCensus() {
        this.census()
        this.censusDialogVisible = true
      },
      async census() {
        const {
          data: {
            bloodGroup,
            bloodType,
            censusData,
            tableData,
            bloodGroupData,
            bloodTypeData,
          },
        } = await getCensus(removeEmptyField(this.queryForm))
        this.censusBloodGroup = bloodGroup
        this.censusBloodType = bloodType
        this.censusData = censusData
        this.tableData = tableData
        this.bloodGroupData = bloodGroupData
        this.bloodTypeData = bloodTypeData
      },
      handleRefresh() {
        this.fetchData()
      },
      handleSizeChange(val) {
        this.queryForm.pagesize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.fetchData()
      },
      tableRowClassName({ row }) {
        // if (row.updated_user) {
        //   return 'bg-danger-plain'
        // }
        if (row.status === 0) {
          return 'bg-warning-plain'
        }
        if (row.status > 0) {
          return 'bg-success-plain'
        }
        if (row.status < 0) {
          return 'bg-danger color-white'
        }
        return ''
      },
    },
  }
</script>

<style lang="scss" scoped>
  .pr8 {
    padding-right: 8px;
  }
  /* 修改鼠标经过表格的颜色 */
  ::v-deep.el-table tbody tr:hover > td {
    color: #000;
  }
</style>
